<template>
  <div class="app-container">
    <el-card>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="案例图片" class="cover" prop="mgExamplePicList">
          <oss v-model="pic" ossURL="/oss/uploadPicExample"></oss>
        </el-form-item>

        <el-form-item label="专业领域" prop="professionalField">
          <el-input
            v-model="form.professionalField"
            placeholder="请输入专业领域"
          />
        </el-form-item>

        <el-form-item label="服务类别" prop="serviceType">
          <el-input v-model="form.serviceType" placeholder="请输入服务类别" />
        </el-form-item>

        <el-form-item label="发表期刊" prop="journals">
          <el-input v-model="form.journals" placeholder="请输入发表期刊" />
        </el-form-item>
        <el-form-item label="期刊分区" prop="journalsClass">
          <el-input v-model="form.journalsClass" placeholder="请输入期刊分区" />
        </el-form-item>

        <el-form-item label="发表时间" prop="publishTime">
          <el-date-picker
            v-model="publishTime"
            style="width: 320px"
            type="date"
            align="right"
            value-format="timestamp"
            placeholder="发表时间"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="论文作者" prop="author">
          <el-input v-model="form.author" placeholder="请输入作者" />
        </el-form-item>
        <el-form-item label="论文链接" prop="link">
          <el-input v-model="form.link" placeholder="请输入论文标题超链接" />
        </el-form-item>

        <el-form-item label="论文标题" prop="article">
          <el-input v-model="form.article" placeholder="请输入论文标题" />
        </el-form-item>
        <el-form-item label="显示排序" prop="sort">
          <el-input type="number" v-model="form.sort" placeholder="请输入排序" />
        </el-form-item>
        <el-form-item label="状态" prop="enabled">
          <el-switch
            v-model="form.enabled"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import rules from "@/rules/example";
import { JOURNALS_CLASS_LABEL } from "@/constant/const";
import { listPic, updateExample } from "@/api/frist/example";
import { timestampToDate } from "@/utils/time";
export default {
  components: { oss: () => import("@/components/ImageUpload/oss.vue") },
  data() {
    return {
      form: {},
      rules: rules,
      pic: undefined,
      publishTime: undefined,
      mgExamplePicList: [],
      journals: JOURNALS_CLASS_LABEL,
    };
  },

  created() {
    let data = sessionStorage.getItem("example");

    if (!data) {
      return;
    }
    this.form = JSON.parse(data);

    this.publishTime = this.form.publishTime
      ? this.form.publishTime * 1000
      : null;

    listPic({
      exampleId: this.form.id,
    }).then((res) => {
      let pics = res.data;

      let picElements = pics.map((e) => e.pic);

      let result = "";

      for (let index = 0; index < picElements.length; index++) {
        const element = picElements[index];
        result = result.concat(element).concat(",");
      }
      this.pic = result.substring(0, result.length - 1);
    });
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      let result = [];
      let picArray = this.pic ? this.pic.split(",") : [];

      for (let i = 0; i < picArray.length; i++) {
        result[i] = {
          pic: picArray[i],
          exampleId: this.form.id,
        };
      }

      this.form.publishTime = this.publishTime ? this.publishTime / 1000 : "";

      this.form.mgExamplePicList = result;

      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return;
        }
        updateExample(this.form).then((response) => {
          this.$modal.msgSuccess("修改成功");
          this.$router.push({ path: "/example/index" });
        });
      });
    },

    cancel() {
      this.$router.replace({
        path: "/example/index?a=" + new Date().getTime(),
      });
    },
  },
};
</script>

<style scoped>
.cover >>> .el-upload-dragger {
  width: 150px;
  height: 150px;
}
</style>
